<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>文章列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weui.css" />
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weuix.css" />
    <script src="/lobsteruiframe/weui/js/zepto.min.js"></script>
    <script src="/lobsteruiframe/weui/js/zepto.weui.js"></script>
    <script src="/lobsteruiframe/weui/js/swipe.js"></script>
    <script src="/lobsteruiframe/weui/js/macy.js"></script>
    <script src="js/handlebars.min.js"></script>
    <script src="/jslib/lobster.js"></script>
    <script src="js/config.js"></script>
</head>

<body>
    <div class="weui-tab" id="t1">
        <div class="weui-navbar scroll-x" id="weui-navbar">

        </div>
        <div class="weui-tab__panel" style="width: 100%;">

        </div>
    </div>
</body>

</html>
<script type="text/template" id="loadingTemplate">
    <!-- {{#each this }} -->

<!-- {{/each}} -->
</script>

<script type="text/template" id="itemTemplate">
    {{#each this }}
    <div class="weui-navbar__item" id="bar{{@index}}">
        {{NodeName}}
    </div>
    {{/each}}
</script>
<script type="text/template" id="contTemplate">
    {{#each this }}  
        <div id="s{{@index}}" class="list">
             
        </div>
        <div style="display:none;padding-bottom:20px;"  class="weui-loadmore" id="more{{@index}}">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    {{/each}}  
</script>
<script type="text/template" id="detailTemplate">
<div class="weui-news">
    <ul class="weui-news-list">
        {{#each this}}
        <li class="weui-news-item" data-id="{{ID}}">
            <div class="weui-news-inner">
                <div class="weui-news-inners">
                    <div class="weui-news-inners">
                        <div class="weui-news-title">{{Title}}</div>
                        <div class="weui-news-text">
                            <p class="weui-news-p">{{Intraduce}}</p>
                        </div>
                    </div>
                    <div class="weui-news-info">
                        <div class="weui-news-infoitem">
                            <img src="images/eye.png"  class="weui-news-round"><span class="weui-news-left">{{TotalHit}}</span>
                        </div>
                        <div class="weui-news-infoitem">{{ReleaseTime}}</div>
                    </div>
                </div>
                <div class="weui-news-media">
                    <img style="width:128px;height:85.25px;" src="{{PicPath}}">
                </div>
            </div>
        </li>
        {{/each}}
    </ul>
</div>

</script>
<style>
    .scroll-x {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;

        white-space: nowrap;
        height: 53px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    .scroll-y {
        overflow-y: auto;
    }

    /*去除滚动条*/
    ::-webkit-scrollbar {
        display: none;
    }

    .weui-navbar__item {
        padding: 13px 3px;
    }

    .order-item {
        display: flex;
        flex-direction: column;
        padding-left: 15px;
        background: #fff;
        margin-top: 8px;
        border-bottom:1px solid #e0e0e0;
    }

    .goods-box-single {
        display: flex;
        padding: 10px 0;
        align-items: center;
    }

    .goods-img {
        display: block;
        width: 120px;
        height: 80px;
        border-radius: 5px;
    }

    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 15px 0 12px;
        overflow: hidden;
    }

    .title {
        font-size: 15px;
        color: #303133;
    }

    .clamp {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .uni-ellipsis-1 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: unset;
    }

    .attr-box {
        font-size: 13px;
        color: #909399;
        margin-top: 8px;
    }

    .time {
        text-align: left;
        font-size: 14px;
        color: #999999;
        margin-top: 5px;
    }
</style>
<script>
    /**
 * @function debounce 函数防抖
 * @param {Function} fn 需要防抖的函数
 * @param {Number} interval 间隔时间
 * @return {Function} 经过防抖处理的函数
 * */
    function debounce(fn, interval) {
        let timer = null; // 定时器
        return function () {
            // 清除上一次的定时器
            clearTimeout(timer);
            // 拿到当前的函数作用域
            let _this = this;
            // 拿到当前函数的参数数组
            let args = Array.prototype.slice.call(arguments, 0);
            // 开启倒计时定时器
            timer = setTimeout(function () {
                // 通过apply传递当前函数this，以及参数
                fn.apply(_this, args);
                // 默认300ms执行
            }, interval || 300)
        }
    }
    $.fn.scrollL = function (options) {
        var defaults = {
            toLeft: 0,    //滚动目标位置
            durTime: 500,  //过渡动画时间
            delay: 30,     //定时器时间
            callback: null   //回调函数
        };
        var opts = $.extend(defaults, options),
            timer = null,
            _this = this,
            curLeft = _this.scrollLeft(),//滚动条当前的位置
            subTop = opts.toLeft - curLeft,    //滚动条目标位置和当前位置的差值
            index = 0,
            dur = Math.round(opts.durTime / opts.delay),
            smoothScroll = function (t) {
                index++;
                var per = Math.round(subTop / dur);
                if (index >= dur) {
                    _this.scrollLeft(t);
                    window.clearInterval(timer);
                    if (opts.callback && typeof opts.callback == 'function') {
                        opts.callback();
                    }
                    return;
                } else {
                    _this.scrollLeft(curLeft + index * per);
                }
            };
        timer = window.setInterval(function () {
            smoothScroll(opts.toLeft);
        }, opts.delay);
        return _this;
    };
    var controller = {
        data: {
            titleData: [],
            pagesize: 10,
            tabCurrentIndex: 0,
            moveleft: 0,
            begTouchs: [],
            nodeid: 0,
            isloading: false,
            workId:0,
            websiteid:0
        },
        //初始化页面
        initpage: function () {
            var self = this;
            self.data.workId = lobsterh5.GetUrlParam("workId") || 2049;
            self.data.websiteid = lobsterh5.GetUrlParam("websiteId") || 1019;
            self.data.nodeid = lobsterh5.GetUrlParam("nodeid");
            self.initevent();
            self.getTitleData();
        },

        //初始化事件
        initevent: function () {
            var self = this;
            $(".weui-tab__panel").scroll(
                debounce(function () {
                    var scrollTop = $(this).scrollTop();
                    var scrollHeight = $(document).height();
                    var windowHeight = $(this).height(); 
                    if (scrollTop > scrollHeight - windowHeight - 1) { 
                        if (self.data.isloading) return;
                        self.data.isloading = true;
                        if (self.data.titleData[self.data.tabCurrentIndex].more)
                            self.getItemData();
                        else
                            self.data.isloading = false;
                    }
                }, 1000)
            );

            $(".weui-tab__panel").on("click", ".weui-news-item", function () {
                location.href = "detail.html?appid="+lobsterh5.GetAppId()+"&workId="+self.data.workId+"&websiteId="+self.data.websiteid+"&id=" + $(this).data("id");
            })
        },
        settab: function () {
            var self = this;
            $("#s" + self.data.tabCurrentIndex).css("display", "block").siblings().css("display", "none");
            $("#bar" + self.data.tabCurrentIndex).addClass("tab-green").siblings().removeClass("tab-green");
        },
        getTitleData: function () {
            var self = this;
            lobsterh5.GETAPI("tsFrontShow.gettitledata", {websiteid:self.data.websiteid,workId:self.data.workId}).then(retdata => {
                var res=retdata["data"];
                self.data.titleData = res;

                if (self.data.titleData == null || self.data.titleData.length == 0) {
                    $.toast("找不到栏目数据", 'forbidden');
                    return;
                }
                if (self.data.nodeid > 0) {
                    res.forEach((element, index) => {
                        if (self.data.nodeid == element.NID) {
                            self.data.tabCurrentIndex = index;
                        }
                    });
                }
                var tpl = $("#itemTemplate").html()
                var template = Handlebars.compile(tpl);
                var html = template(res);
                $(".weui-navbar").html(html);

                tpl = $("#contTemplate").html()
                template = Handlebars.compile(tpl);
                html = template(res);
                $(".weui-tab__panel").html(html);

                // tpl = $("#loadingTemplate").html()
                // template = Handlebars.compile(tpl);
                // html = template(res);
                // $("#loadinglist").html(html);

                var left = $(".weui-navbar__item:eq(" + self.data.tabCurrentIndex + ")").offset().left;
                $("#weui-navbar").scrollL({ toLeft: left, durTime: 300 });
                $('#t1').tab({
                    defaultIndex: self.data.tabCurrentIndex,
                    activeClass: 'tab-green',
                    onToggle: function (index) {
                        self.data.tabCurrentIndex = index;
                        console.log(self.data.isloading);
                        if (self.data.isloading) return;
                        self.data.isloading = true;
                        self.getItemData();
                    }
                });
            })
        },
        getItemData: function () {
            var self = this;
            //这里是将订单挂载到tab列表下
            let index = self.data.tabCurrentIndex;
            let navItem = self.data.titleData[index];
            if (!navItem.orderList) {
                navItem.orderList = [];
                navItem.more = true;
                navItem.currpage = 1;
            }
            $(".weui-loadmore").hide();
            $("#more" + self.data.tabCurrentIndex).show();
            $(".list").hide();
            $("#s" + self.data.tabCurrentIndex).show();
            if (navItem.more) {
                lobsterh5.GETAPI("tsFrontShow.getitemdata", {
                    id: navItem.NID, page: navItem.currpage, pagesize: self.data.pagesize
                }).then(retdata => {
                    var res=retdata["data"];
                    self.data.isloading = false;
                    navItem.orderList = res;
                    navItem.orderList.forEach(item=>{
                        item.PicPath=item.PicPath || 'images/default.png';
                    })
                    navItem.currpage = navItem.currpage + 1;
                    navItem.more = res.length < self.data.pagesize ? false : true;
                    var tpl = $("#detailTemplate").html()
                    var template = Handlebars.compile(tpl);
                    var html = template(navItem.orderList);

                    $("#s" + self.data.tabCurrentIndex).append(html);
                    if (!navItem.more) {
                        $("#more" + self.data.tabCurrentIndex).show().html("没有更多数据了");
                    } 
                });
            } else {
                self.data.isloading = false;
                $("#s" + self.data.tabCurrentIndex).css("display", "block").siblings().css("display", "none");
                $("#more" + self.data.tabCurrentIndex).show().html("没有更多数据了");
            }
        }
    }
    $(function () {
        controller.initpage();
    })
</script>